<template>
  <div class="Analyse">
    <div class="title desc" @click="$emit('changeType', 2)">
      返回查看报告
    </div>
    <div class="title-box">
      <div class="title">
        题目解析
      </div>
      <div class="right-collection">
        <img src="../../../../assets/images/sc_2@2x.png" v-if="info.hasCollected" @click="cancelCollectTest" alt="">
        <img src="../../../../assets/images/sc_1@2x.png" @click="collectTest" v-else alt="">
        收藏
      </div>
    </div>
    <questionsList :isAnalyse="true" :questionsInfo="info" />
    <div class="title">
      我的回答情况
    </div>
    <div class="answer-box">
      <span class="answer-left">我的答案</span>
      <span class="answer-a">{{info.myAnswer}}</span>
      <span :class="`answer-boolean ${info.rightFlag === '1' ? '' : 'cuo'}`">{{info.rightFlag === '1' ? '正确' : '错误'}}</span>
    </div>
    <div class="answer-box">
      <span class="answer-left">正确答案</span>
      <span class="answer-a active">{{info.rightAnswer}}</span>
      <span class="answer-left">正确率：{{info.rightRate}}%</span>
    </div>
    <div class="title">
      各项占比
    </div>
    <div class="list">
      <div class="li" v-for="item in info.answerRate" :key="item.answer_code">
        <div class="li-x">{{item.answer_code}}:</div>
        <div class="proess" :style="`width: ${item.answer_rate * 3}px`"></div>
        <div class="rota">{{item.answer_rate}}%</div>
      </div>
    </div>
    <div class="title">
      答案解析:
    </div>
    <div class="detail">
      {{info.subjectMap.subject_answer_anaylse}}
    </div>
  </div>
</template>

<script>
import questionsList from './questionsList'
import { collectTest, cancelCollectTest } from '@/api/student/lesson/study'
export default {
  name: 'Analyse',
  components: {
    questionsList
  },
  props: {
    info: {
      type: Object,
      default: () => {}
    },
    resourceLessonChapterId: {
      type: String,
      default: ''
    }
  },
  methods: {
    async collectTest () {
      const res = await collectTest({
        resourceLessonChapterId: this.resourceLessonChapterId,
        subjectId: this.info.subjectMap.subject_id
      })
      if (res.code === '200') {
        this.info.hasCollected = true
        this.info.collectId = res.data.collectId
      } else {
        this.$message.error(res.message)
      }
    },
    async cancelCollectTest () {
      const res = await cancelCollectTest({
        collectId: this.info.collectId
      })
      if (res.code === '200') {
        this.info.hasCollected = false
      } else {
        this.$message.error(res.message)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.Analyse {
  overflow-y: scroll;
  overflow-x: hidden;
  min-height: 812px;
  .title {
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(16, 29, 55, 1);
    line-height: 52px;
    &.desc {
      color: #009cf6;
      cursor: pointer;
    }
  }
  .title-box {
    height: 73px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .right-collection {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(16, 29, 55, 1);
      img {
        width: 18px;
        height: 18px;
      }
    }
  }
  .answer-box {
    .answer-left {
      width: 62px;
      height: 13px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(16, 29, 55, 1);
      line-height: 52px;
      opacity: 0.6;
      margin-right: 20px;
    }
    .answer-a {
      margin-right: 30px;
      height: 11px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(16, 29, 55, 1);
      line-height: 52px;
      &.active {
        color: #009cf6;
      }
    }
    .answer-boolean {
      width: 28px;
      height: 13px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(4, 203, 116, 1);
      line-height: 52px;
      &.cuo {
        color: red;
      }
    }
  }
  .list {
    .li {
      height: 14px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      .li-x {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(16, 29, 55, 1);
        line-height: 52px;
        margin-right: 10px;
      }
      .proess {
        width: 238px;
        height: 14px;
        background: rgba(0, 156, 246, 1);
      }
      .rota {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(16, 29, 55, 1);
        line-height: 52px;
        margin-left: 10px;
      }
    }
  }
  .detail {
    width: 673px;
    height: 80px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(16, 29, 55, 1);
    line-height: 22px;
  }
}
</style>
